<style scoped>
    .personnel-empowerment-page{}
    .personnel-empowerment-page .el-form{width:920px;margin:auto;}

  
    .personnel-empowerment-page p{display:inline-block;}
    
    .personnel-empowerment-page .my-transfer-box{}
    .personnel-empowerment-page .my-transfer-box .left-box{width:400px;}
    .personnel-empowerment-page .my-transfer-box .left-box .left-title{width:100%;margin-bottom:10px;}
    .personnel-empowerment-page .my-transfer-box .left-box .left-title h2{width:80%;text-align:center;line-height:46px;}
    .personnel-empowerment-page .my-transfer-box .right-box{width:400px;}
    .personnel-empowerment-page .my-transfer-box .right-box .right-title{width:100%;margin-bottom:10px;}
    .personnel-empowerment-page .my-transfer-box .right-box .right-title h2{width:80%;text-align:center;line-height:46px;}
    .personnel-empowerment-page .my-transfer-box .right-box .right-title .el-radio-group{padding-left:15px;} /*width:76%;*/
    .personnel-empowerment-page .my-transfer-box .right-box .right-title .el-radio-group .el-radio{display:block;margin-bottom:6px;}
    .personnel-empowerment-page .my-transfer-box .right-box .right-title .el-radio+.el-radio{margin-left:0;}

    .personnel-empowerment-page .my-transfer-box .transfer-content{padding:5%;width:90%;border:1px solid #ccc;overflow-x:hidden;overflow-y:scroll;}
    .personnel-empowerment-page .my-transfer-box .transfer-transfer .el-checkbox-group{}
    .personnel-empowerment-page .my-transfer-box .transfer-content .el-checkbox-group label{display:block;margin:0 0 10px 0;}

    .personnel-empowerment-page .my-transfer-box .left-transfer{height:340px;}
    .personnel-empowerment-page .my-transfer-box .left-transfer .el-checkbox-group{}
    .personnel-empowerment-page .my-transfer-box .left-transfer .el-checkbox-group label{}
    .personnel-empowerment-page .my-transfer-box .left-transfer{}

    .personnel-empowerment-page .my-transfer-box .center-transfer{width:120px;margin-top:180px;}
    .personnel-empowerment-page .my-transfer-box .center-transfer .el-button{min-width:48px;display:block;margin:0 auto 10px!important;}

    .personnel-empowerment-page .my-transfer-box .right-transfer{height:253px;}
    .personnel-empowerment-page .my-transfer-box .right-transfer .el-checkbox-group{}
    .personnel-empowerment-page .my-transfer-box .right-transfer .el-checkbox-group label{}

    .personnel-empowerment-page .el-select-dropdown{}
</style>
<template> 
    <div class="personnel-empowerment-page">
        <el-form :model="empowermentForm">
            <!-- 法人列表 -->
            <div class="my-transfer-box clearfix">
                <div class="left-box fleft">
                    <div class="left-title">
                        <!--角色列表-->
                        <h2 v-text="nowLangue.roleList"></h2>
                        <!--角色名称-->
                        <p class="condition" v-text="nowLangue.roleName"></p>
                        <el-select size="mini" v-model="roleId"  @change="selectedRoleList" :placeholder="nowLangue.pleaseSelect">
                            <el-option v-for="(roleData,index) in roleLists" :key="index" :label="roleData.roleName":value="roleData.id">
                                <span style="float: left">{{ roleData.roleName }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ roleData.roleCode }}</span>
                            </el-option>
                        </el-select>
                    </div>
                     <div class="left-transfer transfer-content">
                        <el-checkbox-group v-model="dSpersonHasRole" @change="handleLeftCheckedChange">
                            <el-checkbox v-for="personHasRole in personHasRoleList" :label="personHasRole.id" :key="personHasRole.personName">
                                {{personHasRole.personName}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
               
                <!-- 操作按钮 -->
                <div class="center-transfer fleft">
                    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="toLeftTransfer"> << </el-button>
                    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="toRightTransfer"> >> </el-button>
                    <!--清除-->
                    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="clearCheckedValue" v-text="nowLangue.eliminate"></el-button>
                    <!--提交-->
                    <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="submitResult" v-text="nowLangue.submit">  </el-button>
                </div>
                <!-- 待选人员列表 -->
                <div class="right-box fright">
                    <div class="right-title">
                        <!--待选人员-->
                        <h2 v-text="nowLangue.listOfCandidatesToBeSelected"></h2>
                        <div>
                            <!--人员来源：-->
                            <p class="condition" v-text="nowLangue.personnelSources"></p>
                            <el-radio-group v-model="personnelSources" @change="handlePersonnelSources">
                                <!--本部人员-->
                                <el-radio :label="3" v-cloak>{{nowLangue.personnelOfDepartment}}</el-radio>
                                <!--业务合作人员-->
                                <el-radio :label="6" v-cloak>{{nowLangue.businessCooperationPersonnel}}</el-radio>
                                <!--服务体系人员-->
                                <el-radio :label="9" v-cloak>{{nowLangue.serviceSystemPersonnel}}</el-radio>
                            </el-radio-group>
                        </div>
                        <div>
                            <!--法人代码：-->
                            <p class="condition" v-if="personnelSources==3" v-text="nowLangue.legalCode"></p>
                            <el-select size="mini" v-if="personnelSources==3" v-model="legalPersonId"  @change="selectedLegalPersonList" :placeholder="nowLangue.pleaseSelect">
                                <el-option v-for="(LegalPersonData,index) in legalPersonLists" :key="index" :label="LegalPersonData.legalPersonCode" :value="LegalPersonData.id">
                                    <span style="float: left">{{ LegalPersonData.legalPersonCode }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ LegalPersonData.legalPersonName }}</span>
                                </el-option>
                            </el-select>
                            <!--业务合作代码：-->
                            <p class="condition" v-if="personnelSources==6" v-text="nowLangue.businessCooperationCode"></p>
                            <el-select size="mini" v-if="personnelSources==6" v-model="partnerPersonId"  @change="selectedPartnerList" :placeholder="nowLangue.pleaseSelect">
                                <el-option v-for="(partnerData,index) in partnerLists" :key="index" :label="partnerData.partnerName" :value="partnerData.id">
                                    <span style="float: left">{{ partnerData.partnerCode }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ partnerData.partnerName }}</span>
                                </el-option>
                            </el-select>
                            <!--服务体系代码：-->
                            <p class="condition" v-if="personnelSources==9" v-text="nowLangue.serviceSystemCode"></p>

                            <el-select size="mini" v-if="personnelSources==9" v-model="serviceStationId"  @change="selectedServicePersonnelList" :placeholder="nowLangue.pleaseSelect">
                                <el-option v-for="(serviceStation,index) in serviceStationLists" :key="index" :label="serviceStation.stationCode":value="serviceStation.stationId">
                                    <span style="float: left">{{ serviceStation.stationCode }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ serviceStation.stationName }}</span>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="right-transfer transfer-content">
                        <el-checkbox-group  v-model="dSpersonNoRole"  @change="handleRightCheckedChange">
                            <el-checkbox v-for="rightPersonnel in personNoRoleList" :label="rightPersonnel.id" :key="rightPersonnel.personName">{{rightPersonnel.personName}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
               
            </div>
        </el-form>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                nowLangue:{},
                roleLists:[],    //角色列表
                roleName:"",    //角色名称
                roleId:"",      // 角色ID

                legalPersonId:"",     //法人id
                legalPersonName:"",   //法人名称
                legalPersonCode:"",   // 法人代码
                legalPersonLists:[],  // 法人列表

                partnerPersonId:"",   
                providerCode:"",
                partnerLists:[],

                serviceStationId:"",
                servicePersonnelCode:"",
                serviceStationLists:[],
                 //人员赋权字段
                empowermentForm:{
                    // personname: '',
                    // username: '',
                    // password: '',
                    // roleIds: [],
                    // roleCode: '',
                },
                personnelSources:"",     // 人员来源 3法人代码  6业务合作代码  9服务体系代码
                dSpersonHasRole:[],      // 左侧 当前角色下选中的人员
                personHasRoleList:[],    // 左侧 当前角色下的人员列表
                allPersonHasRoleList:[], // 所有拥有当前选中角色的用户
                allPersonUnderDept:[],   // 当前选中法人/服务站/供应商下面所有的用户
                dSpersonNoRole:[],       // 右侧 当前选项下选中的人员
                personNoRoleList:[]     // 右侧 当前选项下的人员列表
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            // powerData(){
            //     return this.$store.state.powerData;
            // },
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            }
        },
        //进入页面立即运行此方法
        mounted: function () {
             var _this = this;
             _this.allRoleList();    //角色列表
         },
        methods: {
            //角色列表
            allRoleList(){
                var _this=this;
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "role/selectEnable",
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log(data);
                            _this.roleLists=data.data;
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },

            calculatePersonsHasRoleUnderDept(allPersonHasRole, personUnderDept){//有角色和无角色的用户应该显示那些
                var _this = this;
                var presonHasRoleIdArray = [];
                allPersonHasRole.forEach(function(personA){
                    personUnderDept.forEach(function(personB){
                        if(personA.id == personB.id){
                            presonHasRoleIdArray.push(personA.id);// 只要id
                        }
                    });
                });
                
                var presonHasRoleArray = [];
                var presonNoRoleArray = [];
                personUnderDept.forEach(function(personB){
                    if($.inArray(personB.id,presonHasRoleIdArray)>=0){
                        presonHasRoleArray.push(personB);
                    }else {
                        presonNoRoleArray.push(personB);
                    }
                });

                _this._data.personHasRoleList = presonHasRoleArray;
                _this._data.personNoRoleList = presonNoRoleArray;

            },
            // 已选角色 已分配的人员
            selectedRoleList(){     
                var _this=this;
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "empower/queryByRole",
                    cache: false,
                    data:{"roleId":_this.roleId},
                    success: function (data) {
                        if (data.success) {
                            _this.allPersonHasRoleList = data.data;   //当前角色 已分配的人员
                            var clearList = _this.calculatePersonsHasRoleUnderDept(_this.allPersonHasRoleList, _this.allPersonUnderDept);
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 选择人员来源
            handlePersonnelSources(){
                var _this=this;
                _this.personNoRoleList=[];
                if(_this.personnelSources==3){
                    var parameters = {
                        pageIndex: 1,
                        pageSize:100,
                        enabled:true
                    };
                    $.ajax({
                        type: 'POST',
                        url: _this.metadata_service + "legalPerson/search",
                        cache: false,
                        data: JSON.stringify(parameters),
                        dataType: 'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                _this.legalPersonLists = data.data.dataList;   //法人列表
                            } else
                                // console.log(data.errorMessage);
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }else if(_this.personnelSources==6){
                    var tmp = {
                            pageIndex : 1
                        };
                    $.ajax({
                        type: 'GET',
                        url: _this.metadata_service + "partner/listAll",
                        cache: false,
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",     
                        success: function (data) {
                            if (data.success) {
                                _this.partnerLists = data.data;        // 业务合作人员列表
                            } else {
                                // console.log(data.errorMessage);
                                _this.common.errorTip(data.errorMessage);
                            }
                        }
                    });
                }else if(_this.personnelSources==9){
                    var tmp={pageIndex: 1};
                    $.ajax({
                        type: 'POST',
                        url: _this.metadata_service+"station/listAll",
                        cache: false,
                        data:JSON.stringify(tmp),
                        dataType:'JSON',
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.success) {
                                //console.log(data);
                                _this.serviceStationLists=data.data;    //服务体系人员列表
                            }else
                                // console.log(data.errorMessage);
                                _this.common.errorTip(data.errorMessage);
                        }
                    });
                }
              
            },
            // 法人代码   已选法人下面的人员
            selectedLegalPersonList(){
                var _this=this;
                if(_this.legalPersonId == ''){
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "empower/queryPersonFromLegal",
                    data:{"legalPersonId":_this.legalPersonId},
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log("法人代码   已选法人下面的人员");
                            // console.log(data.data);
                            _this.allPersonUnderDept=data.data;
                            var clearList = _this.calculatePersonsHasRoleUnderDept(_this.allPersonHasRoleList, _this.allPersonUnderDept);
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            // 业务合作代码  已选中人员下面的人员
            selectedPartnerList(){
                var _this=this; 
                if(_this.partnerPersonId == ''){
                    return;
                }
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "empower/queryPersonFromPartner",
                    data:{"partnerPersonId":_this.partnerPersonId,"roleId":_this.roleId},
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log("业务合作代码  已选中人员下面的人员");
                            // console.log(data.data);
                            _this.allPersonUnderDept=data.data;
                            var clearList = _this.calculatePersonsHasRoleUnderDept(_this.allPersonHasRoleList, _this.allPersonUnderDept);
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },//

            // 服务体系代码  已选中人员下面的人员
            selectedServicePersonnelList(){
                var _this=this;
                if(_this.serviceStationId == ''){
                    return;
                }
                // console.log("_this.serviceStationId: " + _this.serviceStationId);
                $.ajax({
                    type: 'GET',
                    url: _this.metadata_service + "empower/queryPersonFromStation",
                    // data:{"servicePersonId": _this.serviceStationId,"roleId":_this.roleId},
                    data:{"stationId":_this.serviceStationId},
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            // console.log("服务体系代码  已选中人员下面的人员");
                            // console.log(data.data);
                            _this.allPersonUnderDept=data.data;
                            var clearList = _this.calculatePersonsHasRoleUnderDept(_this.allPersonHasRoleList, _this.allPersonUnderDept);
                        } else
                            // console.log(data.errorMessage);
                            _this.common.errorTip(data.errorMessage);
                    }
                });
            },
            handleLeftCheckedChange(){
                
            },
            handleRightCheckedChange(){

            },
            // 向左
            toLeftTransfer(){
                var _this=this;
                if(_this.dSpersonNoRole.length){
                    var tempArray = [].concat(_this.dSpersonNoRole);
                    var personToMove = [];
                    var personLeft = [];
                    // console.log(tempArray);
                    // console.log("tempArray.length" + tempArray.length);
                    _this.personNoRoleList.forEach(function(personB){
                        if($.inArray(personB.id, tempArray) >= 0){
                            personToMove.push(personB);
                        }else{
                            personLeft.push(personB);
                        }
                    });
                    // console.log(personToMove);
                    // console.log(personLeft);

                    _this.dSpersonNoRole = [];
                    _this.personNoRoleList = personLeft;
                    _this.personHasRoleList = _this.personHasRoleList.concat(personToMove);
                }else{
                    var error = _this.languageType == "zh" ? "暂无选中项" : "No selected item";
                    _this.common.errorTip(error);
                }

            },
            //向右
            toRightTransfer(){
                var _this=this;
                if(_this.dSpersonHasRole.length){
                    var tempArray = [].concat(_this.dSpersonHasRole);
                    
                    // console.log(tempArray);
                    // console.log("tempArray.length" + tempArray.length);

                    var personToMove = [];
                    var personLeft = [];
                    _this.personHasRoleList.forEach(function(personB){
                        if($.inArray(personB.id, tempArray) >= 0){
                            personToMove.push(personB);
                        }else{
                            personLeft.push(personB);
                        }
                    });
                    // console.log(personToMove);
                    // console.log(personLeft);
                    _this.dSpersonHasRole = [];
                    _this.personHasRoleList = personLeft;
                    _this.personNoRoleList = _this.personNoRoleList.concat(personToMove);
                }else{
                    var error = _this.languageType == "zh" ? "暂无选中项" : "No selected item";
                    _this.common.errorTip(error);
                }
            },
            //清除
            clearCheckedValue(){
                var _this=this;
                _this.personNoRoleList = _this.personNoRoleList.concat(_this.personHasRoleList);
                _this.dSpersonHasRole = [];
                _this.personHasRoleList = [];
            },
            //提交
            submitResult(){
                var _this=this;
                var tmp = {"roleId": _this.roleId, "roleName": _this.roleName, "userList": _this.personHasRoleList};
                if(_this.roleId!=""){
                    if(_this.personnelSources==3){
                        tmp.staffType=1;
                        if(_this.legalPersonId!=""){
                            tmp.companyId=_this.legalPersonId;
                            _this.submitRequest(tmp);//提交
                        }else{
                            var error = _this.languageType == "zh" ? "请选择法人代码" : "Please select the corporate code";
                            _this.common.errorTip(error);
                        }
                    }else if(_this.personnelSources==6){
                        tmp.staffType=2;
                        if(_this.partnerPersonId!=""){
                            tmp.companyId=_this.partnerPersonId;
                            _this.submitRequest(tmp);//提交
                        }else{
                            var error = _this.languageType == "zh" ? "请选择业务合作代码" : "Please select the business cooperation code";
                            _this.common.errorTip(error);
                        }
                    }else if(_this.personnelSources==9){
                        tmp.staffType=3;
                        if(_this.serviceStationId!=""){
                            tmp.companyId=_this.serviceStationId;
                            _this.submitRequest(tmp);//提交
                        }else{
                            var error = _this.languageType == "zh" ? "请选择服务体系代码" : "Please select the service system code";
                            _this.common.errorTip(error);
                        }
                    }else{
                        var error = _this.languageType == "zh" ? "请选择人员来源" : "Please select the source of personnel";
                        _this.common.errorTip(error);
                    }
                }else{
                     var error = _this.languageType == "zh" ? "请选择角色名称" : "Please select the name of the role";
                    _this.common.errorTip(error);
                }


            },
            //提交请求
            submitRequest(tmp){
                var _this=this;
                //console.log(mp);
                 $.ajax({
                     type: 'POST',
                     url: _this.metadata_service + "empower/saveRoleAllot",
                     cache: false,
                     data: JSON.stringify(tmp),
                     dataType: 'JSON',
                     contentType: "application/json;charset=utf-8",
                     success: function (data) {
                         if (data.success) {
                            var success=_this.languageType=="zh"?'提交成功！':'Submit successfully!';
                            _this.common.successTip(success);
                             _this.dSpersonNoRole=[];

                             // console.log("提交成功后，左侧的值");
                             // console.log(_this.personHasRoleList);
                         } else
                             // console.log(data.errorMessage);
                             _this.common.errorTip(data.errorMessage);
                     }
                 });
            }
        }
    }
</script>



